<template>
	<view class="msg">
		<view class="navText">
			<text @click="social" :class="{clickStyle:isSocial,noClickStyle:isNotice}" style="margin-right: 50px;">社交</text>
			<text @click="notice" :class="{clickStyle:isNotice,noClickStyle:isSocial}">通知</text>
		</view>
		<social v-show="isSocial"/>
		<notice v-show="isNotice"/>
	</view>
</template>

<script>
	import social from './components/social.vue' 
	import notice from './components/notice.vue' 
	export default {
		data() {
			return {
				isSocial:true,
				isNotice:false
			}
		},
		components:{
			social,
			notice
		},
		methods:{
			social(){
				this.isSocial = true;
				this.isNotice = false;
			},
			notice(){
				this.isSocial = false;
				this.isNotice = true;
			}
		}
	}
</script>

<style scoped src="../../static/css/msg.css"></style>
